<template>
  <div>
    <div class="flex justify-content-between mb10">
      <div class="flex">
        <div>
          <span class="mr5"><a-button type="primary"  :loading="addLoading" @click="handleAddOpen"> <template
              #icon><PlusOutlined/> </template>添加任解职记录</a-button></span>
        </div>
      </div>
    </div>
    <a-table
        :columns="columns"
        rowClassName="items"
        :loading="tableLoading"
        rowKey="id"
        :pagination="false"
        :data-source="tableData"
        style="height:calc(100vh - 305px)"
        size="small" sticky bordered>
      <template #bodyCell="{ column,text,record,index }">
        <template v-if="column.dataIndex==='username'">
          <div class="flex">
            <img :src="record.avatar" class="avatar" style="width: 24px;height: 24px;border-radius: 50%;">
            <span class="ml10">{{record.username}}</span>
          </div>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
              <span class="mr5">
                <a-button  type="primary"  class="mr10" @click="handleEditWork(record)" size="small"> 编辑</a-button>
                <a-popconfirm title="你确定删除吗?"  @confirm="handleDelete(record.id)">
                <a-button type="primary"  size="small" danger>
                  <template #icon>
                    <CloseOutlined
                        style="font-size:12px"/>
                  </template>
                  删除
                </a-button>
              </a-popconfirm>
              </span>
          </div>
        </template>
      </template>
    </a-table>
    <div class="flex justify-center mt20">
      <a-pagination
          v-model:current="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          @change="handleChangePageNo"
          :page-size-options="pageSizeOptions"
          :show-total="total => `共 ${total} 项`"
          show-size-changer
          :total="total"/>
    </div>
    <add-user-work ref="addWorkRef" @success="handleLoadSearch"></add-user-work>
  </div>
</template>
<script setup>
import AddUserWork from "./AddUserWork.vue";
const cid = ref("")
const cname = ref("")
const addWorkRef = ref(null)
const addLoading = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const tableData = ref([]);
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const emits = defineEmits(["success"])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 15,
  chuanYuanId:"",
  keyword:''
})

const columns = [
  {title: '#', width: 80, dataIndex: 'index',align:"center",customRender:({text,record,index})=>index+1},
  {title: '任职船名', width: 100, dataIndex: 'chuanBoMing',align:"center", ellipsis: true},
  {title: '任职职务', width: 100, dataIndex: 'renZhiZhiwU',align:"center", ellipsis: true},
  {title: '任职日期', width: 100, dataIndex: 'renZhiRiQi',align:"center", ellipsis: true},
  {title: '任职资历来源', width: 150, dataIndex: 'renZhiZiLiLaiYuan',align:"center", ellipsis: true},
  {title: '解职日期',  width: 100, dataIndex: 'jieZhiRiQi',align:"center", ellipsis: true},
  {title: '解职资历来源',  width: 150, dataIndex: 'jieZhiZiLiLaiYuan',align:"center", ellipsis: true},
  {title: '任职天数', width: 100,dataIndex: 'renZhiTianShu',align:"center", ellipsis: true},
  {title: '公司名称', width: 100, dataIndex: 'gongSiMing',align:"center"},
  {title: '船舶种类', width: 100, dataIndex: 'chuanBoZhongLei',align:"center", ellipsis: true},
  {title: '船舶等级', width: 100, dataIndex: 'chuanBoDengJi',align:"center", ellipsis: true},
  {title: '航区', width: 100, dataIndex: 'hangQu',align:"center", ellipsis: true},
  {
    title: '操作',
    dataIndex: 'operation',
    width: 150,
    align: "center"
  },
];

/**
 * 回调查询
 */
const handleLoadSearch = async ()=>{
  handleLoadData(cid.value,cname.value)
}

/**
 * 查询列表数据
 */
const handleLoadData = async (chuanYuanId,chuanYuanName)=>{
  cid.value = chuanYuanId
  cname.value = chuanYuanName
  queryParams.chuanYuanId = chuanYuanId
  tableLoading.value = true
  const resp = await useLoadChuanYuanKuGongZuoApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData(cid.value,cname.value)
}


// 取消绑定
const handleEditWork = async(record) => {
  addWorkRef.value.handleOpen(record,cid.value,cname.value)
}

const handleDelete = async(id) => {
  try {
    await useDelChuanYuanKuGongZuoApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData(cid.value,cname.value)
  }catch (e){
    useMessage().error(e.msg)
  }
}


const handleAddOpen = async ()=>{
  addWorkRef.value.handleOpen({},cid.value,cname.value)
}

defineExpose({
  handleLoadData
})
</script>
